import "./resister.scss";
import { TextField } from "../textfield/textfield";
import { Button } from "../button/button";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import { useVerification } from "../../utils/hook";
import _ from "lodash";
import { setNewAccount } from "@/api/login/login";
import { message } from "antd";
const { verification } = useVerification();
const Register = () => {
  const navigate = useNavigate();
  // 注册账号
  const [regAccount, setRegAccount] = useState("");

  // 注册账号报错与信息
  const [accError, setAccError] = useState(false);
  const [accErrorMessage, setAccErrorMessage] = useState("");

  // 注册密码
  const [regPassWord, setRegPassWord] = useState("");

  // 密码正则
  const passwordReg = /^.{8}$/;

  // 注册密码报错与信息
  const [passError, setPassError] = useState(false);
  const [passErrorMessage, setPassErrorMessage] = useState("");

  // 手机号
  const [regPhone, setRegPhone] = useState("");

  // 手机号正则
  const phoneReg = /^1[3-9]\d{9}$/;

  // 手机号报错与信息
  const [phoneError, setPhoneEror] = useState(false);
  const [phoneErrorMessage, setPhoneErrorMessage] = useState("");

  // 邮箱
  const [regEmail, setRegEmail] = useState("");

  // 邮箱正则
  const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

  // 邮箱报错与信息
  const [emailError, setEmailError] = useState(false);
  const [emailErrorMessage, setEmailErrorMessage] = useState("");

  // 备注
  const [mark, setMark] = useState("");

  // 注册请求
  const register = async () => {
    let res = await setNewAccount({
      username: regAccount,
      password: regPassWord,
      comefrom: "1",
      phone: regPhone,
      remarks: mark,
    });
    // @ts-expect-error
    if (res.success == 0) {
      // @ts-expect-error
      message.error(res.message);
    }
    // @ts-expect-error
    if (res.success == 1) {
      // @ts-expect-error
      message.success(res.message);
      navigate("/login");
    }
  };

  // 注册前的验证
  const postRegister = () => {
    if (regAccount == "") {
      setAccError(true);
      setAccErrorMessage("账号不能为空");
      return;
    }
    if (regPassWord == "") {
      setPassError(true);
      setPassErrorMessage("密码不能为空");
      return;
    } else if (!passwordReg.test(regPassWord)) {
      setPassError(true);
      setPassErrorMessage("密码格式不正确");
      return;
    }
    if (regPhone == "") {
      setPhoneEror(true);
      setPhoneErrorMessage("手机号不能为空");
      return;
    } else if (!phoneReg.test(regPhone)) {
      setPhoneEror(true);
      setPhoneErrorMessage("手机号格式不正确");
      return;
    }
    if (regEmail == "") {
      setEmailError(true);
      setEmailErrorMessage("邮箱不能为空");
      return;
    } else if (!emailReg.test(regEmail)) {
      setEmailError(true);
      setEmailErrorMessage("邮箱格式不正确");
      return;
    }
    // 发起请求
    register();
  };

  return (
    <>
      <div className="dashboard_register_box">
        <div className="dashboard_register_title">
          <h4 className="title_main">账号注册</h4>
        </div>
        <div className="dashboard_register_main">
          <div className="dashboard_register_textfield">
            <div className="dashboard_textfield_main">
              <TextField
                type="text"
                className="textfield"
                placeholder="请输入账号"
                onChange={(e) =>
                  verification(
                    setAccError,
                    setAccErrorMessage,
                    "账号不能为空",
                    e,
                    setRegAccount
                  )
                }
                error={accError}
                errorMessage={accErrorMessage}
              />
            </div>
            <div className="dashboard_textfield_main">
              <TextField
                type="password"
                className="textfield"
                placeholder="请输入8位密码"
                onChange={(e) =>
                  verification(
                    setPassError,
                    setPassErrorMessage,
                    "密码不能为空",
                    e,
                    setRegPassWord,
                    "密码格式不正确",
                    passwordReg
                  )
                }
                error={passError}
                errorMessage={passErrorMessage}
              />
            </div>
            <div className="dashboard_textfield_main">
              <TextField
                type="text"
                className="textfield"
                placeholder="请输入国内手机号"
                onChange={(e) =>
                  verification(
                    setPhoneEror,
                    setPhoneErrorMessage,
                    "手机号不能为空",
                    e,
                    setRegPhone,
                    "手机号格式不正确",
                    phoneReg
                  )
                }
                error={phoneError}
                errorMessage={phoneErrorMessage}
              />
            </div>
            <div className="dashboard_textfield_main">
              <TextField
                type="text"
                className="textfield"
                placeholder="请输入注册邮箱"
                onChange={(e) =>
                  verification(
                    setEmailError,
                    setEmailErrorMessage,
                    "邮箱不能为空",
                    e,
                    setRegEmail,
                    "邮箱格式不正确",
                    emailReg
                  )
                }
                error={emailError}
                errorMessage={emailErrorMessage}
              />
            </div>
            <div className="dashboard_textfield_main">
              <TextField
                type="text"
                className="textfield"
                placeholder="输入备注"
                onChange={(e) => setMark(e)}
              />
            </div>
          </div>
          <div className="dashboard_register_btn">
            <Button
              label={"注册SuperID账号"}
              className="dashboard_button_login"
              onClick={postRegister}
            />
            <div className="link_box">
              <Link to={"/login"}>返回登录页</Link>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Register;
